<template>
<div class="header" v-loading.fullscreen.lock="loading">
    <div class="left">
        <span class="head-title"><i class="iconfont icon-yatuoxinxi"></i>
         • 机器学习平台
         <span class="tag" v-preventReClick="2000" @click="toOps">{{showOps === '1' ? '实验工作台' : '运维中心'}}</span>
        </span>
    </div>
    <div class="right">
        <!-- <el-popover trigger="click" width="400" v-model="noticeShow" placement="bottom">
            <notice-dialog v-if="noticeShow" @toNotice="noticeShow=false;$router.push('/notice')"></notice-dialog>
            <i class="iconfont icon-xiaoxi" slot="reference"></i>
        </el-popover> -->
        <!-- <span class="fix-btn" @click="$router.push('/operations')">运维中心</span> -->
        <el-select size="small" class="project-list" clearable v-model="id" filterable placeholder="请选择项目" @change="changeId">
            <el-option v-for="(item, i) in projectList" :key="i" :label="item.projectName" :value="item.projectId"></el-option>
        </el-select>
        <div class="help-box" @click="handleToHelp">
            <i class="iconfont icon-bangzhu help-icon"></i>
            <span>使用帮助</span>
        </div>
        <el-dropdown trigger="click">
            <span class="el-dropdown-link"><avatar class="avatar" :username="avatar" :src="avatar" :size="30"></avatar>{{userName}}</span>
            <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item>用户信息</el-dropdown-item> -->
                <el-dropdown-item @click.native="handleSignout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</div>
</template>

<script>
import Avatar from 'vue-avatar'
// import NoticeDialog from '../notice/NoticeDialog'
import {
    mapMutations,
    mapGetters
} from 'vuex'
export default {
    name: 'HeadNav',
    inject: ['reload'],
    components: {
        Avatar
        // NoticeDialog
    },
    data () {
        const user = JSON.parse(localStorage.getItem('USER'))
        return {
            loading: false,
            noticeShow: false,
            userName: (user && user.username) || '用户昵称',
            avatar: (user && require(`@/assets/img/${user.avatar}`)) || '',
            id: ''
        }
    },
    computed: {
        ...mapGetters({
            showOps: 'common/getShowOps',
            projectId: 'common/getProjectId',
            projectList: 'common/getProjectList'
        })
    },
    created () {
        this.id = this.projectId - 0
    },
    mounted () {
        this.$el.onselectstart = e => {
            e.returnValue = false
        }
    },
    watch: {
        $route () {
            this.id = this.projectId - 0
        }
    },
    methods: {
        ...mapMutations({
            setShowOps: 'common/setShowOps',
            setProjectId: 'common/setProjectId',
            setCurrentProjectInfo: 'common/setCurrentProjectInfo',
            setCollapse: 'common/setCollapse',
            setShowNodeProp: 'common/setShowNodeProp'
        }),
        toOps () {
            this.loading = true
            const showOps = this.showOps === '1' ? '0' : '1'
            this.setShowOps(showOps)
            localStorage.setItem('showOps', showOps)
            this.$router.push(this.showOps === '1' ? '/opsCenter' : '/expEdit')
            setTimeout(() => {
                this.loading = false
            }, 500)
        },
        handleToHelp () {
            window.open(`${window.location.origin}/doc/index.html`, '_blank')
        },
        getProjectInfo () {
            const [item] = this.projectList.filter(v => v.projectId === this.id)
            item && this.setCurrentProjectInfo(item)
        },
        changeId (val) {
            if (val) {
                this.id = val - 0
                this.getProjectInfo()
                this.setProjectId(this.id)
                localStorage.setItem('projectId', val)
                this.setShowNodeProp(false)
                this.reload()
            }
        },
        handleSignout () {
            localStorage.clear()
            window.location.href = `${location.origin}/index.html#/login`
        }
    }
}
</script>

<style lang="less">
.header {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    .icon-xiaoxi {
        cursor: pointer;
        font-size: 24px;
    }

    .el-dropdown-link {
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        .avatar {
            margin-right: 5px;
        }
    }

    .left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 100%;

        .head-title {
            color: #fff;
            letter-spacing: 1px;
            font-size: 18px;
            i {
                font-size: 18px;
                color: #fff;
            }
        }
        .tag {
            margin-left: 4px;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
        }
    }

    .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        .fix-btn {
            color: #fff;
            padding: 0px 20px;
            cursor: pointer;
        }
        .help-box {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin: 0 15px;
            font-size: 14px;
            .help-icon {
                font-size: 18px;
                color: #fff;
            }
            span {
                margin-left: 5px;
                color: #fff;
            }
        }
    }
}
</style>
